{% extends "base.html" %}
{% block title %}Vaultora - Two-Factor Auth{% endblock %}
{% block content %}
<div class="row justify-content-center">
    <div class="col-md-4">
        <div class="card p-4 mt-5">
            <h4 class="text-center mb-3">📱 Two-Factor Authentication</h4>
            <p class="text-muted text-center">Scan this QR code with your authenticator app, then enter the 6-digit code.</p>
            <div class="text-center mb-3">
                <img src="https://api.qrserver.com/v1/create-qr-code/?data={{ provisioning_uri | urlencode }}&size=180x180" />
            </div>
            <form method="POST">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    <div class="mb-3">
        <input type="text" name="otp" class="form-control text-center"
               placeholder="6-digit code" maxlength="6" required autofocus/>
    </div>
    <button type="submit" class="btn btn-primary w-100">Verify</button>
</form>
        </div>
    </div>
</div>
{% endblock %}